<template>
  <div ref="EchartsContainer" class="echarts-contianer">
    <el-button type="primary" size="default" @click="toggleFullScroll">全屏</el-button>

    <!-- 销售额 -->
    <div>
      <countTo style="color:#ffffff;font-size: 30px;" :start-val="startVal" :end-val="endVal" :duration="3000" />
    </div>
    <!-- 2. 准备一个表格容器 -->
    <div id="demo" class="demo" />

    <!-- 订单退单柱状图 -->
    <div>
      <OrderReturnBar />
    </div>

    <!-- 字符云 -->
    <div>
      <WorldEchart />
    </div>
    <!-- 购买终端 -->
    <div>
      <PieEchart />
    </div>
    <!-- 地图 -->
    <div>
      <MapEchart />
    </div>
    <!-- 动态粒子 -->
    <div class="bg-animate">
      <BgAnimate />
    </div>

  </div>
</template>

<script>
// 1. 引入 echarts
import * as echarts from 'echarts'
import OrderReturnBar from './components/OrderReturnBar.vue'
import WorldEchart from './components/WorldEchart.vue'
import PieEchart from './components/PieEchart.vue'
import MapEchart from './components/MapEchart.vue'
import BgAnimate from './components/BgAnimate.vue'
import countTo from 'vue-count-to'
import screenfull from 'screenfull'
export default {
  name: 'Dashboard',
  components: {
    OrderReturnBar,
    countTo,
    WorldEchart,
    PieEchart,
    MapEchart,
    BgAnimate
  },
  data() {
    return {
      startVal: 80000000,
      endVal: 100000000000
    }
  },
  created() {

  },
  mounted() {
    // 3. 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('demo'))
    // 4. 准备选项内容
    const option = {
      color: [
        '#ff0000',
        '#00ff00',
        '#61a0a8',
        '#d48265',
        '#91c7ae',
        '#749f83',
        '#ca8622',
        '#bda29a',
        '#6e7074',
        '#546570',
        '#c4ccd3'
      ],
      title: {
        text: '月订单'
      },
      tooltip: {},
      legend: {},
      toolbox: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
          color: [
            '#ffff00'
          ]
        },
        {
          name: '退单',
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    // 5. 设置选项
    myChart.setOption(option)
  },
  methods: {
    toggleFullScroll() {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.EchartsContainer)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts-contianer{
  background-color: #0a1631;
  .demo{
    margin:  50px auto;
    width: 500px;
    height: 300px;
    border: 1px solid red;
  }
  .bg-animate{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15%;
  }
}
</style>
